<template>
	<view class="content">
		<view class="form-block" style="border-radius:30rpx 30rpx 0 0 ;">
			<view class="form-title">{{type=='perfect'?'创建名片':'个人信息'}}</view>
			<view class="sub-title">向求职者介绍一下自己吧</view>
			<view class="form-item">
				<view class="form-label">我的公司</view>
				<view class="form-content">
					<block v-if="type == 'perfect'">
						<Combox labelKey="enterpriseName" valueKey="id" :candidates="comList" :border="false"
							placeholder="请选择我的公司" @input="fieldNameChange" @dict="fieldIdChange" class="form-ctrl"
							@pageBottom="pageBottom"></Combox>
						<view class="iconfont icon-gengduo1 arrow"></view>
					</block>
					<block v-else>
						<view class="form-ctrl" style="color:#999;">{{comName}}</view>
					</block>
					<!-- <input v-model="form.com_name" maxlength="30" type="text" placeholder-class="inputPlaceholder" placeholder="请填写公司名称" class="form-ctrl" @input="onInput"/> -->
				</view>
			</view>
			<view class="form-item photo">
				<view class="form-label">头像</view>
				<button hover-class="none" @chooseavatar="photoChoose" open-type="chooseAvatar" class="photo"
					style="border: none;padding: 0;background: none;">
					<image :src="form.faceUrl?form.faceUrl:imageUrl+'/job_hunting/home/Mr.png'" class="photo"></image>
				</button>

			</view>
			<view class="form-item">
				<view class="form-label">姓名</view>
				<view class="form-content">
					<input v-model="form.realName" maxlength="10" type="text" placeholder-class="inputPlaceholder"
						placeholder="请填写姓名" class="form-ctrl" />
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">我的职务</view>
				<view class="form-content">
					<input v-model="form.comPosition" maxlength="30" type="text" placeholder-class="inputPlaceholder"
						placeholder="请填写职务名称" class="form-ctrl" />
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">所在街道/乡镇</view>
				<view class="form-content">
					<uni-section title="街道社区" type="line" padding class="form-ctrl" >
						<uni-data-picker placeholder="请选择街道" popup-title="请选择社区" :localdata="list" :map="listMap"
							v-model="form.streetId">
						</uni-data-picker>
					</uni-section>
				</view>
				
			</view>
			<view @click="handleSave" class="btn">保存</view>
		</view>
	</view>
</template>

<script>
	import {
		getEnterpriseList,
		addComOne,
		getComRecruiters
	} from '@/api/company.js'
	import {
		uploadFile
	} from '@/api/file.js'
	import {
		validate
	} from '@/util/validate';
	import Combox from '@/page_other/components/Combox/Combox'
	import {
		getQuestionnaireConfigCus,
	} from '@/api/registration.js'
	export default {
		components: {
			Combox
		},
		data() {
			return {
				list: [],
				listMap: {
					text: 'name',
					value: 'id',
					children: 'child'
				},
				comListConf: {
					loading: false,
					searchComName: '',
					total: 0,
					comPage: 1,
				},
				comName: '',
				comList: [],
				form: {
					faceUrl: '',
					realName: '',
					comId: '',
					numId: '',
					comPosition: '',
					type: 'add',
					streetId: 0
				},
				rules: {
					// faceUrl: {
					// 	name: '头像',
					// 	required: true
					// },
					realName: {
						name: '姓名',
						required: true,
						validator: function(value, form, callback) {
							if (value.length < 2) {
								callback('请填写正确的姓名')
							}
							callback();
						}
					},
					// comId: {
					// 	name: '公司',
					// 	required: true,
					// 	validator: function(value, form, callback) {
					// 		if (value <= 0) {
					// 			callback('请选择公司')
					// 		}
					// 		callback();
					// 	}
					// },

					comPosition: {
						name: '职务名称',
						required: true,
						validator: function(value, form, callback) {
							if (value.length < 2) {
								callback('请填写正确的职务名称')
							}
							callback();
						}
					},
				},
				editRules: {
					faceUrl: {
						name: '头像',
						required: true
					},
					realName: {
						name: '姓名',
						required: true,
						validator: function(value, form, callback) {
							if (value.length < 2) {
								callback('请填写正确的姓名')
							}
							callback();
						}
					},
					comPosition: {
						name: '职务名称',
						required: true,
						validator: function(value, form, callback) {
							if (value.length < 2) {
								callback('请填写正确的职务名称')
							}
							callback();
						}
					},

				},
				imageUrl: '',
				type: null,
			}
		},
		methods: {
			getList() {
				getQuestionnaireConfigCus({
					type: 4
				}).then((res) => {
					this.list = res ?? [];
					resolve();
				}).catch((res) => {
					reject(res);
				})
			},
			pageBottom() {
				if (this.comListConf.page * 100 < this.comListConf.total) {
					this.comListConf.page++;
					this.getEnterprise()
				}
			},
			fieldNameChange(e) {
				this.comListConf.searchComName = e;
				this.form.numId = e;
				this.comListConf.page = 1;
				this.getEnterprise();
			},
			fieldIdChange(e) {
				this.form.comId = e;
				for (var i = 0; i < this.comList.length; i++) {
					if (e == this.comList[i].id) {
						this.form.numId = this.comList[i].erterpriseIdNum
						this.form.streetId = this.comList[i].streetId
					}
				}
			},
			photoChoose(e) {
				const filePath = e.detail.avatarUrl;
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				uploadFile(filePath).then((res) => {
					const data = JSON.parse(res.data);
					uni.hideLoading()
					if (data.code == 200) {
						this.showToast('上传成功')
						this.form.faceUrl = data.data
					} else {
						this.showToast(data.msg)
					}
				}).catch((res) => {
					uni.hideLoading()
					this.showToast('上传失败');
				})
			},
			getEnterprise() {
				if (this.comListConf.loading) return;
				this.comListConf.loading = true;
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getEnterpriseList({
					comName: this.comListConf.searchComName,
					page: this.comListConf.page,
					limit: 100
				}).then((res) => {
					this.comList = res.list ?? [];
					this.comListConf.total = res.count;
				}).finally(() => {
					this.loading = false;
					this.comListConf.loading = false;
				})
			},
			getDetail() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getComRecruiters({}).then((res) => {
					this.form.realName = res.com.realName;
					this.form.comPosition = res.com.comPosition;
					this.form.faceUrl = res.faceUrl;
					this.form.comId = res.com.comId
					this.form.streetId = res.com.streetId
					this.comName = res.com.comName;
				})
			},
			handleSave() {
				if (this.type == 'perfect') {
					if (validate(this.form, this.rules)) {
						uni.showLoading({
							title: '提交中',
							mask: true
						})
						if (this.form.streetId == 0||this.form.streetId == null) {
							this.showToast('请选择所在街道')
							return
						}
						addComOne(this.form).then((res) => {
							console.log(res)
							if (res == 0) {
								this.showToast('请填写正确企业名称')
							} else {
								this.showToast('保存成功', () => {
									this.$store.dispatch('user/getUser')
									uni.redirectTo({
										url: `/page_other/enterprise/authorization/business`
									})
								})
							}

						})
					}
				} else {
					if (validate(this.form, this.editRules)) {
						uni.showLoading({
							title: '提交中',
							mask: true
						})
						addComOne(this.form).then(() => {
							this.showToast('保存成功', () => {
								this.$store.dispatch('user/getUser')
							})
						})
					}
				}

			}
		},
		onLoad(e) {
			this.type = e.type
			if (this.type != 'perfect') {
				this.getDetail()
				this.form.type = 'modify';
			}
			this.getList()
			this.imageUrl = this.globalConfig.imageUrl;
		},
	}
</script>

<style lang="scss">
	.content {
		width: 100%;

		.btn {
			width: 350rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #FF7626;
			color: #fff;
			font-size: 28rpx;
			border-radius: 40rpx;
			margin: 0 auto;
			margin-top: 80rpx;
		}

		.user-photo-block {
			width: 100%;
			height: 450rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.user-photo {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
			}
		}

		.form-block {
			width: 100%;
			background: #fff;
			padding: 30rpx;

			.form-title {
				font-size: 36rpx;
				font-weight: bold;
			}

			.sub-title {
				margin: 20rpx 0;
				font-size: 26rpx;
				color: #999;
			}

			.form-item {
				display: flex;
				flex-direction: column;
				border-bottom: 1px solid #efefef;
				padding-top: 30rpx;

				.form-label {
					font-size: 28rpx;
					color: #999;
				}

				.form-content {
					display: flex;
					flex-direction: row;
					align-items: center;

					.form-ctrl {
						height: 100rpx;
						line-height: 100rpx;
						flex-grow: 1;
					}

					uni-combox {
						display: flex;
					}

					.arrow {
						flex-grow: 0;
						color: #999;
						font-size: 24rpx;
					}
				}
			}

			.form-item.photo {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding-bottom: 30rpx;

				.photo {
					flex-grow: 0;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}

				.form-label {
					flex-grow: 1;
				}
			}
		}
	}
</style>